<template>
  <div class="statistic-real-time">
    <RemoteScript
      src="https://api.map.baidu.com/getscript?v=2.0&ak=KpwyWqx9vxepctF2chqZKMaBxa9D4bYl&services=&t=20210225162129"
      @load="baiduLoad"
      :beforeRender="beforeApiMapRender"
    />
    <div class="main">
      <div class="logo"><img :src="logo" /></div>
      <h2 class="h-title web-font">
        <span>网关监控平台</span>
        <el-dropdown class="more-handle" @command="handleCommand">
          <div class="action">
            <i class="el-icon-more" />
          </div>
          <el-dropdown-menu slot="dropdown" class="account-dropdown">
            <el-dropdown-item command="fullScreen">
              <i class="el-icon-full-screen"></i>{{ isFull ? '退出' : '' }}全屏
            </el-dropdown-item>
            <el-dropdown-item command="logout">
              <i class="el-icon-switch-button"></i>退出登录
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </h2>
      <el-row :gutter="10">
        <el-col :span="7" class="chart-split-box">
          <div class="chart-item">
            <div ref="chartQps" class="chart-instance" />
          </div>
          <div class="chart-item">
            <div ref="chartAppRank" class="chart-instance"></div>
          </div>
        </el-col>
        <el-col :span="10" class="chart-split-box">
          <div class="chart-item blank">
            <div class="count">
              <div class="count-item">
                <h3 class="web-font">应用数：</h3>
                <span>
                  <ICountUp
                    class="c-up web-font"
                    :delay="1000"
                    :end-val="appCount"
                    :options="ICountUpOptions"
                  />
                </span>
              </div>
              <div class="count-item">
                <h3 class="web-font">总流量：</h3>
                <span>
                  <ICountUp
                    class="c-up web-font"
                    :delay="1000"
                    :end-val="flowCount"
                    :options="ICountUpOptions"
                  />
                </span>
              </div>
              <div class="count-item">
                <h3 class="web-font">请求总数：</h3>
                <span>
                  <ICountUp
                    class="c-up web-font"
                    :delay="1000"
                    :end-val="requestCount"
                    :options="ICountUpOptions"
                  />
                </span>
              </div>
            </div>
          </div>
          <div class="chart-item blank">
            <div ref="chartServerUseAble" class="chart-instance"></div>
          </div>
        </el-col>
        <el-col :span="7" class="chart-split-box">
          <div class="chart-item">
            <div ref="chartFlow" class="chart-instance"></div>
          </div>
          <div class="chart-item">
            <div ref="chartErrors" class="chart-instance"></div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="bg">
      <div ref="chartMapBg" class="chart-map-bg"></div>
    </div>
    <div v-if="!hideCover" :class="{ 'init-cover': true, hide: !loading }">
      <div class="logo"><img :src="logo" /></div>
      <span class="web-font">初始化中</span>
    </div>
  </div>
</template>

<script>
import logoIcon from '@/assets/imgs/logo_icon.png';
import chartMap from './charts/map';
import serverUseable from './charts/serverUseable';
import errors from './charts/errors';
import flow from './charts/flow';
import qps from './charts/qps';
import appRank from './charts/appRank';

export default {
  data() {
    return {
      isFull: false,
      hideCover: false,
      loading: true,
      logo: logoIcon,
      chartInstances: [],
      ICountUpOptions: {
        useEasing: true,
        useGrouping: true,
        separator: ',',
        decimal: '.',
        prefix: '',
        suffix: '',
      },
      appCount: 0,
      flowCount: 0,
      requestCount: 0,
      serverUseable: 0,
      baiduMapLoaded: false,
      initChartData: null,
    };
  },
  watch: {
    baiduMapLoaded(newVal) {
      if (newVal) {
        this.initCharts();
      }
    },
  },
  mounted() {
    window.addEventListener('resize', this.onresize);
    this.getData();
    clearInterval(this.loop);
    this.loop = setInterval(() => {
      this.getData({ notChart: true }); //暂不更新图表
    }, 5000);
  },
  destroyed() {
    window.removeEventListener('resize', this.onresize);
  },
  methods: {
    baiduLoad() {
      this.baiduMapLoaded = true;
    },
    onresize() {
      this.chartInstances &&
        this.chartInstances.forEach(item => {
          item.resize && item.resize();
        });
    },
    getData(opt = {}) {
      const { notChart } = opt;
      this.$api('getDashboardData')
        .then(res => {
          const { appCount, flowCount, requestCount, ...others } = res.data;
          this.appCount = appCount;
          this.flowCount = flowCount;
          this.requestCount = requestCount;
          this.initChartData = others;
          if (!notChart) this.initCharts();
          this.hideLoading();
        })
        .finally(() => {});
    },
    hideLoading() {
      setTimeout(() => {
        this.loading = false;
        setTimeout(() => {
          this.hideCover = true;
        }, 1000);
      }, 1000);
    },
    initCharts() {
      if (this.initChartData && this.baiduMapLoaded) {
        const { serverUseable = [], qps = [], errors = [], flow = [], appRank = [] } =
          this.initChartData || {};
        this.initMapBg();
        this.initServerUseable(serverUseable);
        this.initQps(qps);
        this.initErrors(errors);
        this.initFlow(flow);
        this.initAppRank(appRank);
      }
    },
    //地图背景
    initMapBg() {
      const dom = this.$refs['chartMapBg'];
      const instance = chartMap({}, dom);
      this.chartInstances.push(instance);
    },
    //服务可用性
    initServerUseable(list = []) {
      const dom = this.$refs['chartServerUseAble'];
      const instance = serverUseable({ list }, dom);
      this.chartInstances.push(instance);
    },
    //qps
    initQps(list = []) {
      const dom = this.$refs['chartQps'];
      const instance = qps({ list }, dom);
      this.chartInstances.push(instance);
    },
    //异常
    initErrors(list = []) {
      const dom = this.$refs['chartErrors'];
      const instance = errors({ list }, dom);
      this.chartInstances.push(instance);
    },
    //异常
    initFlow(list = []) {
      const dom = this.$refs['chartFlow'];
      const instance = flow({ list }, dom);
      this.chartInstances.push(instance);
    },
    //应用排行
    initAppRank(list = []) {
      const dom = this.$refs['chartAppRank'];
      const instance = appRank({ list }, dom);
      this.chartInstances.push(instance);
    },
    fullScreen() {
      if (this.isFull) {
        this.isFull = false;
        (function exitFullscreen() {
          if (document.exitFullScreen) {
            document.exitFullScreen();
          } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
          } else if (document.webkitExitFullscreen) {
            document.webkitExitFullscreen();
          } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
          }
        })();
      } else {
        this.isFull = true;
        (function full(ele) {
          if (ele.requestFullscreen) {
            ele.requestFullscreen();
          } else if (ele.mozRequestFullScreen) {
            ele.mozRequestFullScreen();
          } else if (ele.webkitRequestFullscreen) {
            ele.webkitRequestFullscreen();
          } else if (ele.msRequestFullscreen) {
            ele.msRequestFullscreen();
          }
        })(document.body);
      }
    },
    handleCommand(type) {
      if (type === 'fullScreen') {
        this.fullScreen();
      } else if (type === 'logout') {
        this.logout();
      }
    },
    beforeApiMapRender() {
      window.HOST_TYPE = '2';
      window.BMap_loadScriptTime = new Date().getTime();
    },
  },
};
</script>
<style lang="less" scoped>
.statistic-real-time {
  min-width: 1200px;
  min-height: 100vh;
  background-color: #044161;
  color: #fff;
  position: relative;
  .main {
    position: relative;
    z-index: 1;
    padding: 0 15px;
    /deep/ .el-row {
      margin: 0;
    }
    .chart-item {
      height: 40vh;
      // border: 1px solid rgba(255, 255, 255, 0.6);
      border-radius: 5px;
      background: rgba(0, 0, 0, 0.2);
      margin-bottom: 15px;
      .chart-instance {
        height: 100%;
      }
      &.blank {
        border: none;
        background: none;
      }
    }
    .chart-split-box {
    }
    .count {
      padding-left: 30px;

      .count-item {
        margin-bottom: 20px;
        h3 {
          color: #fff;
          opacity: 0.7;
          margin-bottom: 5px;
        }
        .c-up {
          font-size: 30px;
        }
      }
    }
  }
  .logo {
    position: absolute;
    left: 20px;
    top: 0px;
    width: 100px;
    padding: 10px 10px;
    box-sizing: border-box;
    background: transparent;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    img {
      display: block;
      width: 100%;
    }
  }
  .h-title {
    text-align: center;
    font-size: 50px;
    color: #fff;
    height: calc(20vh - 33px);
    display: flex;
    align-content: center;
    justify-content: center;
    align-content: center;
    margin-bottom: 0;
    flex-direction: column;
    position: relative;
    .more-handle {
      position: absolute;
      top: 20px;
      right: 50px;
      color: #fff;
      font-size: 20px;
    }
  }
  .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    .chart-map-bg {
      width: 100%;
      height: 100%;
    }
    /deep/ .BMap_cpyCtrl {
      display: none !important;
    }
    /deep/ .anchorBL {
      display: none !important;
    }
  }
  .init-cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #044161;
    z-index: 20;
    color: #333;
    display: flex;
    align-items: center;
    text-align: center;
    flex-direction: column;
    justify-content: center;
    transition: all 1s ease 0s;
    color: #fff;
    span {
      font-size: 50px;
      animation: shaning 2s linear 0s infinite;
    }
    &.hide {
      opacity: 0;
    }
  }
}
@keyframes shaning {
  0% {
    opacity: 0.8;
  }
  50% {
    opacity: 0.1;
  }
  100% {
    opacity: 0.8;
  }
}
</style>
